<template>
  <div class="tabs">
    <div class="header flex align-center ">
      <div class="text-bold hand fon20 m-20">测试1</div>
      <div class="text-bold hand fon20 m-20">测试2</div>
      <div class="text-bold hand fon20 m-20">测试3</div>
      <div class="text-bold hand fon20 m-20">测试4</div>
    </div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.tabs{
  .header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background-image: radial-gradient(circle, transparent 1px,#fff 1px);
    border-bottom:1px solid #dcdfe6;
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
  }
}
</style>
